<script>
import * as echarts from 'echarts'
import GlobalFilterListener from './GlobalFilterListener.vue'
const ds = [
  { name: '工艺空压机', value: 970 },
  { name: '低温冰机', value: 1350 },
  { name: '制氮空压机', value: 1044 },
  { name: '中温冷机', value: 1235 },
  { name: '热回收机组', value: 782 },
  { name: '燃生物质锅炉', value: 202 },
  { name: '拉幅定型机', value: 235 },
  { name: '废气多级环保净化装置', value: 125 },
  { name: '涂装生产线', value: 635 },
  { name: '喷淋清洗线', value: 574 },
  { name: 'NFO污水处理系统', value: 904 },
  { name: 'COSMAP自动磨抛单元', value: 136 },
  { name: '低压铸造机', value: 155 },
  { name: '多弧加溅射真空镀膜机', value: 114 },
  { name: '塑胶电镀线\n', value: 836 },
]
export default {
  name: 'analysis-of-major-energy-consuming-equipment',
  mixins: [GlobalFilterListener],
  props: {
    labelColor: {
      type: String,
      default: '#8bb5f9'
    }
  },
  inject: ['colors'],
  data () {
    return {
      lists: []
    }
  },
  computed: {
    chartOption () {
      return {
        tooltip: {
          trigger: 'item',
          valueFormatter: value => `${value} KW`
        },
        textStyle: {
          color: '#2c528f'
        },
        grid: {
          bottom: '20px',
          top: '20px'
        },
        xAxis: {
          type: 'category',
          data: this.lists.map(v => v.name),
          axisLabel: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#2c528f'
            }
          },
          splitLine: {
            show: false,
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: '主要耗能设备分析',
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(255,255,255,0.05)'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            },
            barMaxWidth: 10,
            data: this.lists
          }
        ]
      }
    }
  },
  mounted () {
    this.rand()
  },
  methods: {
    eventBusHandler () {
      this.rand()
    },
    rand () {
      ds.sort(() => Math.random() - 0.5)
      this.lists = ds
    },
  },
}
</script>

<template>
  <div class="block-item">
    <div class="flex align-center item-head">
      <svg-icon class="item-icon" name="print"></svg-icon>
      <div class="head-title">
        <h3 class="primary-title">主要耗能设备分析</h3>
        <p class="secondary-title">Analysis of major energy-consuming equipment</p>
      </div>
    </div>
    <div class="item-body">
      <div class="item-content" ref="container">
        <v-chart ref="chart" :option="chartOption" style="width: 100%;height: 200px;"></v-chart>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
